import * as React from "react";
import { makeStyles } from "@material-ui/styles";
import { StyleRules } from "@material-ui/styles/withStyles";
import {
  Button,
  Col,
  Form,
  Icon,
  Input,
  Row,
  Select,
  DatePicker,
  Upload,
  message,
  Modal,
  Spin
} from "antd";
import { FormComponentProps } from "antd/es/form";
import { FormEvent, useState } from "react";
import { UploadFile } from "antd/lib/upload/interface";
import { UploadChangeParam } from "antd/es/upload";
import Axios from "axios";
import { RouteComponentProps } from "react-router";

const useStyles = makeStyles<StyleRules<any, "root">>({
  root: {
    minHeight: "95vh",
    margin: 25
  }
});
const newFileList: UploadFile[] = [];
const newFileListHead: UploadFile[] = [];
interface Iprops extends FormComponentProps, RouteComponentProps {}
const AddPerson = (props: Iprops) => {
  const { getFieldDecorator } = props.form;
  const clsses = useStyles();
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [previewVisible, setPreviewVisible] = useState<boolean>(false);
  const [previewImage, setPreviewImage] = useState<string>("");
  const [spinning, setSpinning] = useState<boolean>(false);
  const handleSubmit = (e: FormEvent) => {
    setSpinning(true);
    e.preventDefault();
    Axios.post("/personInfo", props.form.getFieldsValue())
      .then(value => {
        setSpinning(false);
        message.success("添加成功");
        props.form.setFieldsValue({});
        props.history.push("/view-person");
      })
      .catch(reason => {
        setSpinning(false);
        message.error("添加失败");
      });
  };
  const normFile = (e: UploadChangeParam) => {
    if (e.file.response) {
      const file: UploadFile = {
        url: e.file.response,
        uid: e.file.uid,
        size: e.file.size,
        name: e.file.name,
        type: e.file.type
      };
      newFileList.push(file);
      return newFileList;
    }
    return e.fileList;
  };
  const normFileHead = (e: UploadChangeParam) => {
    if (e.file.response) {
      const file: UploadFile = {
        url: e.file.response,
        uid: e.file.uid,
        size: e.file.size,
        name: e.file.name,
        type: e.file.type
      };
      newFileListHead.push(file);
      return newFileListHead;
    }
    return e.fileList;
  };
  const handlePreview = (file: any) => {
    setPreviewImage(file.url || file.thumbUrl);
    setPreviewVisible(true);
  };
  const uploadButton = (
    <div>
      <Icon type="plus" />
      <div className="ant-upload-text">上传</div>
    </div>
  );
  return (
    <div className={clsses.root}>
      <Spin tip="添加中..." spinning={spinning}>
        <Form
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 12 }}
          onSubmit={handleSubmit}
        >
          <Row gutter={24}>
            <Col span={6}>
              <Form.Item label={"姓名"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("name", {
                  rules: [{ required: true, message: "请输入姓名" }]
                })(
                  <Input
                    prefix={
                      <Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    placeholder="姓名"
                  />
                )}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"类别"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("kind", {
                  rules: [{ required: true, message: "选择种类" }],
                  initialValue: "月嫂"
                })(
                  <Select placeholder="选择月嫂/育儿嫂">
                    <Select.Option value="月嫂">月嫂</Select.Option>
                    <Select.Option value="育儿嫂">育儿嫂</Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"价格"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("price", {
                  rules: [{ required: true, message: "输入价格" }]
                })(<Input type={"number"} placeholder="价格" />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"工作时长"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("workExperience")(<DatePicker.RangePicker />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"性别"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("sex", {
                  initialValue: "女"
                })(
                  <Select placeholder="性别">
                    <Select.Option value="女">女</Select.Option>
                    <Select.Option value="男">男</Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"婚否"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("marriage", {
                  initialValue: "已婚"
                })(
                  <Select placeholder="婚否">
                    <Select.Option value="已婚">已婚</Select.Option>
                    <Select.Option value="未婚">未婚</Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"籍贯"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("nativePlace", {
                  initialValue: "四川"
                })(<Input />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"出生日期"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("birthday", {})(
                  <DatePicker style={{ width: "100%" }} />
                )}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"健康状况"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("health", {
                  initialValue: "健康"
                })(
                  <Select>
                    <Select.Option value="健康">健康</Select.Option>
                    <Select.Option value="一般">一般</Select.Option>
                    <Select.Option value="较差">较差</Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"名族"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("nationalists", {
                  initialValue: "汉族"
                })(<Input />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"身高（cm）"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("height", {})(<Input type={"number"} />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"体重（kg）"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("weight", {})(<Input type={"number"} />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"家庭地址"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("address", {})(<Input />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"参加培训"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("training", {
                  initialValue: "母婴护理"
                })(<Input />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"政治面貌"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("politicsStatus", {})(<Input />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"户口所在地"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("domicilePlace", {})(<Input />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label={"文化程度"} wrapperCol={{ span: 12 }}>
                {getFieldDecorator("standardCulture", {
                  initialValue: "高中"
                })(
                  <Select>
                    <Select.Option value="小学">小学</Select.Option>
                    <Select.Option value="初中">初中</Select.Option>
                    <Select.Option value="高中">高中</Select.Option>
                    <Select.Option value="专科">专科</Select.Option>
                    <Select.Option value="本科">本科</Select.Option>
                    <Select.Option value="研究生">研究生</Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                labelCol={{ span: 4 }}
                label={"月嫂服务-产妇护理"}
                wrapperCol={{ span: 12 }}
              >
                {getFieldDecorator("maternalCare", {
                  initialValue: [
                    "子宫复旧",
                    "哺乳指导",
                    "营养配餐",
                    "心理护理",
                    "形体恢复、锻炼指导",
                    "个人卫生护理",
                    "产后伤口护理"
                  ]
                })(
                  <Select mode={"tags"} allowClear={true}>
                    <Select.Option value="子宫复旧">子宫复旧</Select.Option>
                    <Select.Option value="哺乳指导">哺乳指导</Select.Option>
                    <Select.Option value="营养配餐">营养配餐</Select.Option>
                    <Select.Option value="心理护理">心理护理</Select.Option>
                    <Select.Option value="形体恢复、锻炼指导">
                      形体恢复、锻炼指导
                    </Select.Option>
                    <Select.Option value="个人卫生护理">
                      个人卫生护理
                    </Select.Option>
                    <Select.Option value="产后伤口护理">
                      产后伤口护理
                    </Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                labelCol={{ span: 4 }}
                label={"月嫂服务-婴儿护理"}
                wrapperCol={{ span: 12 }}
              >
                {getFieldDecorator("babyCare", {
                  initialValue: [
                    "科学喂养",
                    "日常生活护理",
                    "婴儿抚触",
                    "脐带护理",
                    "测量体温、异常观察",
                    "早期智力开发",
                    "疾病预防与意外防范",
                    "生长测评"
                  ]
                })(
                  <Select mode={"tags"} allowClear={true}>
                    <Select.Option value="科学喂养">科学喂养</Select.Option>
                    <Select.Option value="日常生活护理">
                      日常生活护理
                    </Select.Option>
                    <Select.Option value="婴儿抚触">婴儿抚触</Select.Option>
                    <Select.Option value="脐带护理">脐带护理</Select.Option>
                    <Select.Option value="测量体温">测量体温</Select.Option>
                    <Select.Option value="异常观察">异常观察</Select.Option>
                    <Select.Option value="早期智力开发">
                      早期智力开发
                    </Select.Option>
                    <Select.Option value="疾病预防与意外防范">
                      疾病预防与意外防范
                    </Select.Option>
                    <Select.Option value="生长测评">生长测评</Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                labelCol={{ span: 4 }}
                label={"职业道德"}
                wrapperCol={{ span: 12 }}
              >
                {getFieldDecorator("professionalEthics", {
                  initialValue: [
                    "讲文明，讲礼貌",
                    "守时守信",
                    "勤奋好学",
                    "尊老爱幼",
                    "尊重雇主、忠诚本分",
                    "热情和蔼"
                  ]
                })(
                  <Select mode={"tags"} allowClear={true}>
                    <Select.Option value="讲文明，讲礼貌">
                      讲文明，讲礼貌
                    </Select.Option>
                    <Select.Option value="守时守信">守时守信</Select.Option>
                    <Select.Option value="勤奋好学">勤奋好学</Select.Option>
                    <Select.Option value="尊老爱幼">尊老爱幼</Select.Option>
                    <Select.Option value="尊重雇主">尊重雇主</Select.Option>
                    <Select.Option value="忠诚本分">忠诚本分</Select.Option>
                    <Select.Option value="热情和蔼">热情和蔼</Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                labelCol={{ span: 4 }}
                label={"生活照"}
                wrapperCol={{ span: 12 }}
              >
                {getFieldDecorator("lifePhotos", {
                  getValueFromEvent: normFile
                })(
                  <Upload
                    action="/file/upload"
                    listType="picture-card"
                    onPreview={handlePreview}
                  >
                    {fileList.length >= 9 ? null : uploadButton}
                  </Upload>
                )}
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                labelCol={{ span: 4 }}
                label={"头像（一张）"}
                wrapperCol={{ span: 12 }}
              >
                {getFieldDecorator("headPortrait", {
                  getValueFromEvent: normFileHead
                })(
                  <Upload
                    action="/file/upload"
                    listType="picture-card"
                    onPreview={handlePreview}
                  >
                    {fileList.length >= 1 ? null : uploadButton}
                  </Upload>
                )}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item wrapperCol={{ span: 12 }}>
                <Button
                  type="primary"
                  htmlType="submit"
                  className="login-form-button"
                >
                  添加
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Spin>
      <Modal
        visible={previewVisible}
        footer={null}
        onCancel={() => {
          setPreviewVisible(false);
        }}
      >
        <img alt="example" style={{ width: "100%" }} src={previewImage} />
      </Modal>
    </div>
  );
};
export default Form.create({})(AddPerson);
